<template>
    <div class="ticket_head column">
        <h2 class="seat_title">舞耀星途第七届中国嘻哈潮流文化节</h2>
        <div class="seat_time row">
            <span>2018.07.28</span>
            <span>周六</span>
            <span>19:30</span>
        </div>
        <div class="seat_info row_c">
            <ul class="choose_t row">
                <li class="row_c">
                    <img :src="require('@/assets/images/choose_w.png')">
                    <span>未选</span>
                </li>
                <li class="row_c">
                    <img :src="require('@/assets/images/choosed.png')">
                    <span>选中</span>
                </li>
                <li class="row_c">
                    <img :src="require('@/assets/images/choose_no.png')">
                    <span>不可选</span>
                </li>
            </ul>
            <div class="area_num"><span>{{region_n}}</span> 区</div>
            <div class="ticket_p row_cc">
                <img :src="require('@/assets/images/price_img.png')">
                <p>980元</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TicketHead',
  props: {
    region_n: ''
  },
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.ticket_head{
  .seat_title{
    font-size: .44rem;
    font-weight: bold;
    margin-top: .4rem;
    line-height: .44rem;
    letter-spacing: .04rem;
    margin-left: .28rem;
  }
  .seat_time{
    margin: .266667rem .28rem;
    span{
      color: #ACACAC;
      font-size: 0.266667rem;
      line-height: 0.266667rem;
      letter-spacing: .026667rem;
      margin-right: 0.12rem;
    }
  }
  .seat_info{
    height: 1.146667rem;
    width: 100%;
    background-color: #F3F3F3;
    .choose_t{
      margin-left: 0.266667rem;
      li{
        margin-right: 0.28rem;
        img{
          width: 0.306667rem;
          height: 0.266667rem;
          margin-right: 0.08rem;
        }
        span{
          color: #989898;
          font-size: 0.266667rem;
        }
      }
    }
    .area_num{
      color: #676767;
      font-size: 0.32rem;
      margin-left: 0.506667rem;
      span{
        color:red;
        font-weight: bold;
      }
    }
    .ticket_p{
      width: 1.8rem;
      height: 0.613333rem;
      background-image: url(~@/assets/images/price_bg.png);
      background-size: 100% 100%;
      margin-left: auto;
      margin-right: 0.28rem;
      img{
        width: 0.386667rem;
        height: 0.333333rem;
        margin-right: 0.16rem;
      }
      p{
        font-size: 0.266667rem;
        color: #FF574A;
        font-weight: bold;
      }
    }
  }
}
</style>
